@section head{
    <link href="~/theme/default/syssetting/sysuser.index.css" rel="stylesheet" asp-append-version="true" />
}
<div class="zb-query-frame">
    <div class="query-block">
        <span>用户账号：</span>
        <el-input placeholder="请输入账号"
                  v-model="query.userNo"
                  size="mini">
        </el-input>
    </div>
    <div class="query-block">
        <span>用户名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="query.userName"
                  size="mini">
        </el-input>
    </div>
    <div class="query-block">
        <el-button type="primary" 
                   icon="el-icon-search" 
                   @@click="onQuery" 
                   v-if="buttons.hasQuery" 
                   size="mini">查询</el-button>
    </div>
</div>
<div class="zb-func-frame">
    <el-button :icon="button.act_icon"
               :key="button.act_no"
               @@click="handleButton(button.act_no)"
               v-for="button in buttons.topOp"
               size="mini">
        <span v-text="button.act_name"></span>
    </el-button>
</div>
<el-table :data="tableData.records"
          height="250"
          border
          class="zb-border-no"
          ref="tblRecords"
          style="width: 100%"
          size="mini">
    <el-table-column type="selection"
                     class-name="table-checkbox-th"
                     width="45"
                     align="center"
                     fixed="left">
    </el-table-column>
    <el-table-column type="index"
                     width="50"
                     align="center"
                     title="序号"
                     :index="recordIndex"
                     fixed="left">
    </el-table-column>
    <el-table-column prop="user_no"
                     label="账号"
                     width="180">
    </el-table-column>
    <el-table-column prop="user_name"
                     label="姓名"
                     width="180">
    </el-table-column>
    <el-table-column prop="user_sex"
                     label="性别"
                     width="70"
                     :formatter="formatterSex"
                     align="center">
    </el-table-column>
    <el-table-column prop="user_mobile"
                     label="手机"
                     width="150"
                     align="center">
    </el-table-column>
    <el-table-column prop="user_email"
                     label="邮箱">
    </el-table-column>
    <el-table-column fixed="right"
                     label=" "
                     width="165">
        <template slot-scope="scope">
            <el-button :icon="button.act_icon"
                       :key="button.act_no"
                       @@click="handleButton(button.act_no, scope.row)"
                       v-for="button in buttons.rowOp"
                       circle
                       size="mini">
            </el-button>
        </template>
    </el-table-column>
</el-table>
<el-pagination background
               layout="prev, pager, next, jumper, total"
               :page-size="query.pageSize"
               :total="tableData.total"
               @@current-change="onPageChange">
</el-pagination>
<zb-edit :options="edit" ref="edit"></zb-edit>
<el-dialog :title="'用户【'+powerInfo.userNo+'】的角色分配'"
           :visible.sync="powerInfo.visible"
           width="625px">
    <el-transfer v-model="powerInfo.value"
                 :data="powerInfo.data"
                 :titles="['未分配的角色', '已分配的角色']"></el-transfer>
    <span slot="footer" class="dialog-footer">
        <el-button @@click="powerInfo.visible = false">取 消</el-button>
        <el-button type="primary" @@click="grantRoles">确 定</el-button>
    </span>
</el-dialog>
@section script{
    <script src="~/module/common/form.template.js" type="text/babel"></script>
    <script src="~/module/syssetting/sysuser.index.js" asp-append-version="true" type="text/babel"></script>
}
